<template>
	<view class="center">
		
		<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
			<image class="logo-img" :src="isAuth ? userInfo.headUrl :avatarUrl"></image>
			<view class="logo-title">
				<text class="uer-name">Hi，{{isAuth ? userInfo.realName : '您未登录'}}</text>
				<text class="uer-auth" v-if="userInfo.status == 2">已实名</text>
				<text class="uer-auth" v-else>未实名</text>
				
				<text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
				
			</view>
		</view>
		<view class="center-list">
			<navigator  url="/pages/certification/certification">
				<view class="center-list-item border-bottom">
						<uni-icons type="auth-filled" color="#55aaff" class="iconStyle"	 size="30"></uni-icons>
						<text class="list-text">个人认证</text>
						<text class="navigat-arrow">&#xe65e;</text>
				</view>
			</navigator>
			<navigator  url="/pages/my/sealManager">
				<view class="center-list-item">
					<uni-icons custom-prefix="iconfont" type="icon-yinzhang" color="#55aaff" size="30"></uni-icons>
					<text class="list-text">印章管理</text>
					<text class="navigat-arrow">&#xe65e;</text>
				</view>
			</navigator>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<uni-icons custom-prefix="iconfont" type="icon-qiye" color="#55aaff" size="30"></uni-icons>
				<text class="list-text">企业管理</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<uni-icons custom-prefix="iconfont" type="icon-bangzhu" color="#55aaff" size="30"></uni-icons>
				<text class="list-text">帮助中心</text>  
				<text class="navigat-arrow">&#xe65e;</text>
			</view>  
		</view>
		<view class="center-list">
			<view class="center-list-item">
				<uni-icons custom-prefix="iconfont" type="icon-a-yinsisimibaomi" color="#55aaff" size="30"></uni-icons>
				<text class="list-text">隐私政策</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item">
				<uni-icons custom-prefix="iconfont" type="icon-kefu" color="#55aaff" size="30"></uni-icons>
				<text class="list-text">客服咨询</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="logout">
			<navigator url="/pages/login/login" hover-class="navigator-hover">
				<button class="logoutButton" @click="logout">登出</button>
			</navigator>
		
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	import {mapMutations}  from 'vuex'
	export default {
		data() {
			return {
				login: false,
				avatarUrl: "../../static/my/logo.png",
				// userInfo: {}
			}
		},
		computed: {
			...mapState(['isAuth', 'userInfo'])
			
		},
		methods: {
			...mapMutations(['logout']),
			goLogin() {
				uni.navigateTo({
					url: '/pages/login/login',
				}); 
			},
			   
		}
	}
</script>

<style>
	@import "@/static/iconfont.css";
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/font_984210_5cs13ndgqsn.ttf') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		width: 750upx;
		height: 240upx;
		padding: 20upx;
		box-sizing: border-box;
		background-color: #55aaff;
		flex-direction: row;
		align-items: center;
	}

	.logo-hover {
		opacity: 0.8;
	}

	.logo-img {
		width: 150upx;
		height: 150upx;
		border-radius: 150upx;
	}

	.logo-title {
		height: 150upx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20upx;
	}

	.uer-name {
		height: 60upx;
		line-height: 60upx;
		font-size: 38upx;
		color: #FFFFFF;
	}
	.uer-auth {
		font-size: 30upx;
		color: #FFFFFF;
	}

	.go-login.navigat-arrow {
		font-size: 38upx;
		color: #FFFFFF;
	}

	.login-title {
		height: 150upx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20upx;
	}

	.center-list {
		background-color: #FFFFFF;
		margin-top: 20upx;
		width: 750upx;
		flex-direction: column;
	}

	.center-list-item {
		display: flex;
		align-items: center;
		height: 90upx;
		width: 750upx;
		box-sizing: border-box;
		flex-direction: row;
		padding: 0upx 20upx;
	}

	.border-bottom {
		border-bottom-width: 1upx;
		border-color: #c8c7cc;
		border-bottom-style: solid;
	}

	.list-icon {
		width: 40upx;
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #55aaff;
		text-align: center;
		font-family: texticons;
		margin-right: 20upx;
	}

	.list-text {
		height: 90upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		flex: 1;
		text-align: left;
		margin-left: 10rpx;
	}

	.navigat-arrow {
		height: 90upx;
		width: 40upx;
		line-height: 90upx;
		font-size: 34upx;
		color: #555;
		text-align: right;
		font-family: texticons;
	}
	.logout {
		margin-top: 60rpx;
		width: 100%;
		height: 100rpx;
		
	}
	
	.logout .logoutButton {
		width: 750rpx;
		height: 100%;
		background-color: #ffffff;
		color: #7d7c7f;
	}
</style>